<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>报销单</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <style>
        td {
            text-align: center;
        }

        .drugs_projects {
            background-color: #fffae8;
            color: #333333;
        }
    </style>
</head>
<body style="background-color: #fffae8;">
<button onclick="location.replace('visitInformation.html')">返回主页</button>
<div id="healingdetails" style="height: 500px;">
    <table style="width: 100%;height: 10%;">
        <thead>
        <tr>
            <td colspan="12"><p style="font-size: 50px; text-align: center;">就诊详单</p></td>
        </tr>
        <tr v-for="(item) in result.head.list">
            <th>报销单编号</th>
            <td>{{item.healing_code}}</td>
            <th>医保卡号</th>
            <td>{{item.insurance_code}}</td>
            <th>银行卡号</th>
            <td>{{item.bank_account}}</td>
            <th>补偿类别</th>
            <td>{{item.compensation}}补偿</td>
            <th>生成时间</th>
            <td>{{item.healing_date}}</td>
            <th>当前报销状态</th>
            <td>{{item.state}}</td>
        </tr>
        </thead>
        <td colspan="12" style="height: 20px;"></td>
        <tbody>
        <tr>
            <td colspan="12"><p style="font-size: 20px;">药品</p></td>
        </tr>
        <tr>
            <table style="width: 100%; height:40%;">
                <thead>
                <tr>
                    <th class="drugs_projects" style="width: 10%;">药品编号</th>
                    <th class="drugs_projects" style="width: 15%;">药品名</th>
                    <th class="drugs_projects" style="width: 5%;">分类</th>
                    <th class="drugs_projects" style="width: 5%;">价格</th>
                    <th class="drugs_projects" style="width: 30%;">制造商</th>
                    <th class="drugs_projects" style="width: 5%;">数量</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item) in result.drugs.list">
                    <td>{{item.drug_code}}</td>
                    <td>{{item.drug_name}}</td>
                    <td>{{item.drug_sort_name}}</td>
                    <td>{{item.drug_price}}元</td>
                    <td>{{item.drug_producer}}</td>
                    <td>{{item.drug_quantity}}</td>
                </tr>
                </tbody>
            </table>
            <div style="text-align:  center;background-color: #fffae8">
                <ul class="pagination" style="margin: auto;">
                    <li v-for="n in result.drugs.pages">
                        <a href="javascript:void(0);" @click="search(n,projectSearchParam.currentpage)"
                           :class="{'active' : n==result.drugs.pageNum}">{{n}}</a>
                    </li>
                </ul>
            </div>
        </tr>
        <tr>
            <table style="width:100%;height:40%;">
                <thead>
                <tr>
                    <td colspan="12">
                        <p style="font-size: 20px;height:40%;">项目</p>
                    </td>
                </tr>
                <tr>
                    <th class="drugs_projects" style="width: 10%;">项目编号</th>
                    <th class="drugs_projects" style="width: 10%;">项目名</th>
                    <th class="drugs_projects" style="width: 10%;">分类</th>
                    <th class="drugs_projects" style="width: 5%;">价格</th>
                    <th class="drugs_projects" style="width: 30%;">实施机构</th>
                    <th class="drugs_projects" style="width: 5%;">次数</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item) in result.projects.list">
                    <td>{{item.project_code}}</td>
                    <td>{{item.project_name}}</td>
                    <td>{{item.project_sort_name}}</td>
                    <td>{{item.project_price}}元</td>
                    <td>{{item.project_producer}}</td>
                    <td>{{item.project_quantity}}</td>
                </tr>
                </tbody>
            </table>
            <div style="text-align:  center;background-color: #fffae8">
                <ul class="pagination" style="margin: auto;">
                    <li v-for="n in result.projects.pages">
                        <a href="javascript:void(0);" @click="search(drugSearchParam.currentpage,n)"
                           :class="{'active' : n==result.projects.pageNum}">{{n}}</a>
                    </li>
                </ul>
            </div>
        </tr>
        </tbody>
        <div style="height: 10%;">
            <table style="width:100%;">
                <tr>
                    <td style="width: 50%;">订单总计：</td>
                    <td>{{result.moneys.list[0].totalMoney}}元</td>
                </tr>
            </table>
        </div>
    </table>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/message.js"></script>
<script type="text/javascript" src="../js/urlparse.js"></script>
<script>
    var vue = new Vue({
        el: "#healingdetails",
        data: {
            "result": {
                "list": {}
            },
            "drugSearchParam": {
                "currentpage": 1,
            },
            "projectSearchParam": {
                "currentpage": 1,
            },
            showmsg: {
                msginfo: "",
                classobject: {
                    msg: false,
                    success: false
                }
            }
        },
        mounted: function () {
            this.pageLoad();
        },
        methods: {
            search: function (drugCurrentPage, projectCurrentPage) {
                this.showmsg.msginfo = "";
                this.drugSearchParam.currentpage = drugCurrentPage;
                this.projectSearchParam.currentpage = projectCurrentPage;
                axios.post("http://localhost:8000/bracelet/release/api/healingdetails",
                    {
                        "insuranceId": "1fc92d8c-bb59-4a5e-ab8d-4e4ec98af09c",//占位，后端未用到该数据
                        "healingId": getQueryString("healingId"),//"1fc92d8c-bb59-4a5e-ab8d-4e4ec98af09c",//sessionStorage.getItem("healingId"),
                        "drugPageNum": this.drugSearchParam.currentpage,
                        "drugPageSize": 4,
                        "projectPageNum": this.projectSearchParam.currentpage,
                        "projectPageSize": 4
                    })
                    .then(res => {
                        console.log(res.data);
                        this.result = res.data.result;

                    })
                    .catch(error => {
                        alert(error.errorMsg);
                    });
            },

        },
        created: function () {
            // 数据初始化完成
            this.search(1, 1);
        },
        mounted: function () {
            // 数据挂载DOM完成事件
        }
    });
</script>
</body>
</html>
